<template>
	<div class="w-h-100 pos-r flex-1" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex" style="box-sizing: border-box; padding: 6px">
			<div style="box-sizing: border-box">
				<v-search :search-arr="searchObjArr" @submit="searchHandle">
					<el-button type="primary" icon="ele-Plus" @click="() => addHandle()"> 新增租户 </el-button>
				</v-search>
			</div>
			<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="hover">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100" style="">
									<el-table :data="list" border class="w-h-100" v-loading="loading">
										<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
										<el-table-column prop="name" label="公司名称" align="center" />
										<el-table-column prop="email" label="账号(邮箱)" align="center" :showOverflowTooltip="true" />
										<el-table-column prop="adminName" label="姓名" align="center" />
										<el-table-column prop="phone" label="电话" align="center" />
										<el-table-column prop="createdTime" label="创建时间" align="center">
											<template #default="scope">
												{{ scope.row.createdTime && $dateFormat(new Date(scope.row.createdTime)) || ''}}
											</template>
										</el-table-column>
										<el-table-column prop="remark" label="备注" align="center" />
										<el-table-column prop="remark" label="操作" align="center" width="200">
											<template #default="scope">
												<el-button icon="ele-Edit" size="small" text type="primary" @click="() => addHandle(scope.row)"> 编辑 </el-button>
												<el-dropdown trigger="click">
													<span class="el-dropdown-link">
														<el-button size="small" text type="primary" style="margin-left: 10px;"> 更多 </el-button>
														<el-icon class="el-icon--right" style="color: #0052d9;vertical-align: middle;">
															<arrow-down />
														</el-icon>
													</span>
													<template #dropdown>
														<el-dropdown-menu>
															<el-dropdown-item class="font-12" @click="openAuth(scope.row)">授权菜单</el-dropdown-item>
															<el-dropdown-item class="font-12" @click="resetPassword(scope.row)">重置密码</el-dropdown-item>
															<el-dropdown-item class="font-12" @click="deleteHandle">删除</el-dropdown-item>
														</el-dropdown-menu>
													</template>
												</el-dropdown>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<v-tenant-form ref="formRef" @submit="(param: any) => submitHandle(param)"></v-tenant-form>
        <v-auth-menu ref="authRef"></v-auth-menu>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import request from '/@/api/develop/tenant';
import VSearch from '/@/components/search/v-search.vue';
import VTenantForm from './components/v-tenant-form.vue';
import VAuthMenu from './components/v-auth-menu.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
	components: {
		VSearch,
		VTenantForm,
        VAuthMenu,
	},
	setup() {
		const formRef = ref();
		const authRef = ref();

		// 搜索关键字
		const searchObj = reactive({
			name: '',
		});

		const searchObjArr: any[] = [
			{
				label: '公司名称',
				key: 'name',
				slot: null,
				type: 'input',
				value: '',
			},
		];

		let tableDataObj = getTableData(request.sysTenantPage, {}, searchObj, true, false);

		// 搜索
		const searchHandle = (params: any) => {
			searchObj.name = params.name;
			tableDataObj.searchHandle();
		};

		// 提交表单数据
		const submitHandle = async (params: any) => {
			if (params.id) {
				await request.sysTenantEdit(params)
			} else {
				await request.sysTenantAdd(params)
			}
			tableDataObj.getData()

		};

		// 新增租户
		const addHandle = (data?: {}) => {
			formRef.value.addNew(data);
		};

        // 授权菜单
        const openAuth = (data: any) => {
            authRef.value.dialogControl(data.id)
        }
        
        // 重置密码
        const resetPassword = (data: any) => {
			ElMessageBox.confirm(
				'要重置密码吗?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(async () => {
				await request.sysTenantResetPwd({id: data.id})
				tableDataObj.getData()
			}).catch( err => {

			}) 
        }
        
        // 删除
        const deleteHandle = (data: any) => {
			ElMessageBox.confirm(
				'要删除该数据吗?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then( async () => {
				await request.sysTenantDelete({id: data.id})
				tableDataObj.getData()
			}).catch( err => {
				
			}) 
			
        }
		
		return {
			...tableDataObj,
			...toRefs(searchObj),
			searchObjArr,
			searchHandle,
			addHandle,
			formRef,
			submitHandle,
            authRef,
            openAuth,
            resetPassword,
            deleteHandle,
		};
	},
});
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
	height: 100%;
}
</style>
